<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>订单</title>
	<script src="js/jquery-1.9.1.min.js"></script>
    <script src="assets/dist/echarts.js"></script>
</head>

<body>
<div id="map" style="width:100%; overflow:auto; overflow:hidden";></div>
</body>
</html>
<script>
$(function(){
	loadArea();
});
function loadArea(){
	$.post("order/showArea",function(result){
		console.log(result);
		if(result.state == 1){
			initMap(result.data);
		}
	});
}

function initMap(datas){
	//统计
    require.config({
       paths: {
           echarts: './assets/dist'
       }
    });
   require(
           [
               'echarts',
				'echarts/theme/macarons',
               'echarts/chart/map',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
               //'echarts/chart/bar'
           ],
           function (ec,theme) {
               var myChart = ec.init(document.getElementById('map'),theme);
				
				option = {
   title : {
       text: '订单量全国各地区的分布情况',
       subtext: '数据源:产品订单',
       x:'center'
   },
   tooltip : {
       trigger: 'item'
   },
   legend: {
       orient: 'vertical',
       x:'left',
       data:['订单量']
   },
   dataRange: {
       x: 'left',
       y: 'bottom',
       splitList: [
           {start: 51},
           {start: 41, end: 50},
           {start: 31, end: 40},
           {start: 21, end: 30},
           {start: 10, end: 20, label: '10 到 20'},
           {start: 5, end: 5, label: '5', color: 'black'},
           {end: 10}
       ],
       color: ['#E0022B', '#E09107', '#A3E00B']
   },
   toolbox: {
       show: true,
       orient : 'vertical',
       x: 'right',
       y: 'center',
       feature : {
           mark : {show: true},
           dataView : {show: true, readOnly: false},
           restore : {show: true},
           saveAsImage : {show: true}
       }
   },
   roamController: {
       show: true,
       x: 'right',
       mapTypeControl: {
           'china': true
       }
   },
   series : [
       {
           name: '订单量',
           type: 'map',
           mapType: 'china',
           roam: false,
           itemStyle:{
               normal:{
                   label:{
                       show:true,
                       textStyle: {
                          color: "rgb(249, 249, 249)"
                       }
                   }
               },
               emphasis:{label:{show:true}}
           },
           data:datas
       }
   ]
};
				
				
				
					 myChart.setOption(option);
			})
}
 	//初始化宽度、高度
    $("#map").height($(window).height()-20); 
	
    //当文档窗口发生改变时 触发  
    $(window).resize(function(){
		$("#map").height($(window).height()-20); 
 	});
	
</script>
